<template>
  <div>

    <el-card class="box-card" >
      <div v-for="(item, i) in papers" :key="item.paperId" @click="jumpToDetail(item)">
        <p class="articles">{{item.title}}</p>
        <hr/>
      </div>

    </el-card>

  </div>
</template>

<script>
import axios from "@/utils/MyAxios";
import qs from "qs";

export default {
  name: "IndexHotPapers",
  data() {
    return {
      papers: [],
      constPapers: [
        {
          name: 'paper1',
          paperId: 1,
        },
        {
          name: 'paper2',
          paperId: 2,
        },
      ]
    }
  },
  mounted() {
    this.getHotPaper()
  },
  methods: {
    getHotPaper() {
      let data = {}

      axios.post('/api/index/paperFocus', qs.stringify(data)).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.papers = res.data.data
          console.log(this.papers)
        }
        else {
          console.log('获取热点论文ERROR')
        }
      })
    },

    jumpToDetail(paper) {
      console.log(paper)

      const { href } = this.$router.resolve({
        path: '/detail',
        //TODO: 在detail中获取到query的值并请求数据
        query: {
          paperId: paper.paperId
        }
      });
      window.open(href, '_blank')
    },

    testSele(val){
      console.log(val);
    },


  }
}
</script>

<style scoped>

.articles {
  font-family: "Apple SD Gothic Neo",serif;
  font-size: medium;
  font-weight: bold;
  color: #13157a;

  cursor: pointer;
}

.paperItem:hover ::v-deep {
  background-color: #0d84ff;
}



.hotPaper ::v-deep {
  --el-table-header-font-color: black;
  --el-table-font-color: blue;
  --el-form-label-font-size: large;

}

.table ::v-deep {
  --el-form-label-font-size: large;
}


</style>